<template>
  <uni-popup ref="popup" type="bottom" backgroundColor="#fff" @mask-click="handleConfirm">
    <view class="flex-col bg-white content-wrap">
      <view class="flex-row align-center justify-between lineBottom10" style="padding: 20rpx">
        <text @click="handleReset">重置</text>
        <text @click="handleConfirm" class="text-blue">确定</text>
      </view>

      <view class="popup-content">
        <view class="lineBottom10 flex-col search-item">
          <text>工单状态</text>
          <view class="flex-row bottom10 flex-wrap">
            <uni-tag @click="statusClick(index,item)" :inverted="!item.check" :circle="true"
                     v-for="(item, index) in  dict.type.work_order_status" :text="item.label"
                     :key="item.value"
                     type="success"/>
          </view>
        </view>

        <linkageSelect ref="refLinkageSelect" @change="handleLinkageSelect"/>

        <view class="lineBottom10 flex-col search-item">
          <text>车辆产权公司</text>
          <select-corporation style="margin: 10rpx 0" @change="change" ref="refCorporation"/>
        </view>

        <view class="lineBottom10 flex-col search-item">
          <text>采购禀议编号</text>
          <view style="margin: 10rpx 0">
            <uni-easyinput style="margin: 10rpx 0" type="text" v-model="ruleForm.procurementReportNumber"
                           placeholder="请输入内容"/>
          </view>
        </view>

        <view class="lineBottom10 flex-col search-item">
          <text>逾期时长</text>
          <search-time style="margin: 10rpx 0" @dateChange="dateChange" ref="refSearchTime"/>
        </view>
      </view>

    </view>
  </uni-popup>
</template>

<script>

export default {
  name: 'conditionSearch',//弹框搜索
  dicts: ['work_order_status'],
  props: {
    value: {
      type: Object,
      default: {}
    }
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
  },
  watch: {},
  data() {
    return {
      param: {},
      range: [],
      linkageList: [],
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    //打开弹框
    open() {
      this.$refs.popup.open()
    },

    //确定
    handleConfirm() {
      this.$emit('confirm', this.ruleForm)
      this.$refs.popup.close()
    },

    //重置
    handleReset() {
      this.$refs.refSearchTime.reset()
      this.$refs.refCorporation.reset()
      this.$refs.refLinkageSelect.reset()
      this.dict.type.work_order_status.forEach(item => item.check = false)
      this.$emit('reset')
    },

    //工单状态
    statusClick(index, val) {
      this.dict.type.work_order_status.forEach((item, i) => {
        if (index === i) {
          item.check = !item.check
        } else {
          item.check = false
        }
      })
      this.$set(this.ruleForm, 'workOrderStatus', val.value)
      this.value.workOrderStatus = this.ruleForm.workOrderStatus = val.value
      this.$forceUpdate()
    },


    //品牌/车系/车型
    handleLinkageSelect(val) {
      this.$set(this.ruleForm, 'brandName', val.brandName)
      this.$set(this.ruleForm, 'seriesName', val.seriesName)
      this.$set(this.ruleForm, 'modelName', val.modelName)
      this.value.brandName = this.ruleForm.brandName = val.brandName
      this.value.seriesName = this.ruleForm.seriesName = val.seriesName
      this.value.modelName = this.ruleForm.modelName = val.modelName
    },

    //车辆产权公司
    change(val) {
      this.$set(this.ruleForm, 'propertyRightId', val.value)
      this.value.propertyRightId = this.ruleForm.propertyRightId = val.value
    },

    //逾期时长
    dateChange(val) {
      this.$set(this.ruleForm, 'startTime', val.startTime)
      this.$set(this.ruleForm, 'endTime', val.endTime)
      this.value.startTime = this.ruleForm.startTime = val.startTime
      this.value.endTime = this.ruleForm.endTime = val.endTime
    }

  },
};
</script>

<style lang="scss" scoped>
.content-wrap {
  border-radius: 20rpx 20rpx 0 0
}

.search-item {
  padding: 0 20rpx 10rpx
}

uni-tag {
  margin: 20rpx 20rpx 10rpx 0
}

.popup-content {
  overflow: auto;
  max-height: 50vh;
}
</style>



